// Copyright (c) [Year] [name of copyright holder]
// [Software Name] is licensed under Mulan PSL v2.
// You can use this software according to the terms and conditions of the Mulan PSL v2. 
// You may obtain a copy of Mulan PSL v2 at:
//          http://license.coscl.org.cn/MulanPSL2 
// THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.  
// See the Mulan PSL v2 for more details.  

// 'use strict';
var appvue = new Vue({
    el: "#app",
    data() {
        return {
            key: 1,
            reres: [],
            bg: [],
            maps: [],
            curRule: {
                req: '.*test\\.com',
                res: 'http://cssha.com',
                //        type: 'file',
                checked: true
            },
            editDisplay: "none",
            btnDisplay: "block",
            //输入错误时候的警告
            inputError: "",
            editType: "添加",
            rules: [],
            editIdx: 0
        }
    },
    methods: {
        text() {
            // console.log('点击测试');
        },
        saveData() {
            let bg = chrome.extension.getBackgroundPage();
            this.rules = this.groupBy(JSON.parse(JSON.stringify(this.maps)), 'group');
            // this.rules.forEach((ele, idx) => {
            //     console.log('rules', ele);
            // });
            console.log('this.maps', this.maps, this.rules);
            console.log('写入', bg.localStorage);
            bg.localStorage.ReResMap = JSON.stringify(this.maps);
            // this.bg.localStorage.setItem("ReResMap", JSON.stringify(this.maps))
        },
        groupBy(collects, name) {
            let ret = {},
                key;
            collects.forEach(function(elem) {
                console.log('elem', elem);
                let key = elem[name || "normal"];
                ret[key] = ret[key] || [];
                ret[key].push(elem);
            });
            return ret;
        },
        hideEditBox() {
            this.editDisplay = 'none';
            this.btnDisplay = 'block';
        },
        showEditBox() {
            this.editDisplay = 'block';
            this.btnDisplay = 'none';
        },
        virify() {
            console.log('this.curRule', this.curRule);
            if (!this.curRule.req) {
                this.inputError = '正则一栏输入不能为空';
                return false;
            }
            try {
                new RegExp(this.curRule.req)
            } catch (e) {
                this.inputError = 'req正则格式错误';
                return false;
            }
            this.inputError = '';
            return true;
        },
        addRule() {
            console.log('添加规则');
            this.curRule = {
                req: '.*test\\.com',
                res: 'http://cssha.com',
                //            type: 'file',
                checked: true
            };
            this.editType = '添加';
            this.showEditBox();
        },
        edit(idx, rule) {
            this.curRule = JSON.parse(JSON.stringify(rule));
            this.editType = '编辑';
            this.editIdx = idx
            this.showEditBox();
        },
        copy(rule) {
            this.curRule = JSON.parse(JSON.stringify(rule));
            this.editType = '复制';
            this.maps.push(JSON.parse(JSON.stringify(rule)));
            this.saveData();
            // this.showEditBox();
        },
        saveRule() {
            console.log('保存规则');
            if (this.virify()) {
                if (this.editType === '添加') {
                    this.maps.push(JSON.parse(JSON.stringify(this.curRule)));
                } else {
                    let editIdx = this.editIdx
                    console.log('切换的editIdx', editIdx);
                    this.maps.splice(editIdx, 1, JSON.parse(JSON.stringify(this.curRule)))
                }
                this.saveData();
                this.hideEditBox();
            }
        },
        removeUrl(rule) {
            for (var i = 0, len = this.maps.length; i < len; i++) {
                if (JSON.stringify(this.maps[i]) === JSON.stringify(rule)) {
                    this.maps.splice(i, 1);
                }
            }
            this.saveData();
        }
    },
    created() {
        console.log('dom初始化');
        console.log('初始化1');
        let bg = chrome.extension.getBackgroundPage();
        console.log('popup初始化', bg.localStorage, this.$refs);
        // this.btnDisplay = "none"
        console.log('bg.localStorage.ReResMap的内容:', bg.localStorage.ReResMap);
        if (bg.localStorage.ReResMap && bg.localStorage.ReResMap.length > 0) {
            console.log('初始化');
            this.maps = JSON.parse(bg.localStorage.ReResMap || [])
            this.rules = this.groupBy(JSON.parse(bg.localStorage.ReResMap || []), 'group');
            console.log('this.rules', this.rules);
            // this.btnDisplay = "block"
        } else {
            bg.localStorage.ReResMap = JSON.stringify({})
        }
    },
    mounted() {
        console.log('初始化1');
        // let bg = chrome.extension.getBackgroundPage();
        // console.log('popup初始化', bg.localStorage, this.$refs);
        // // this.btnDisplay = "none"
        // if (bg.localStorage.ReResMap) {
        //     console.log('初始化');
        //     this.maps = JSON.parse(bg.localStorage.ReResMap || [])
        //     this.rules = this.groupBy(JSON.parse(bg.localStorage.ReResMap || []), 'group');
        //     console.log('this.rules', this.rules);
        //     // this.btnDisplay = "block"
        // } else {
        //     bg.localStorage.ReResMap = JSON.stringify({})
        // }
    }
})